<template>
   <div id="chart" style="height:600px" ref="chart">
   
  </div>
</template>

<script>
import moment from 'moment';
  export default {
     data() {
  return {
    chart: null,
    dateArray:[]

    
  }
     },
     mounted () {
  this.week()
  // 在这里初始化 echarts 因为初始化要传实例
  this.initChart()   
     },
     methods: {
  // 近一周的日期
  week () {
        var myDate = new Date() // 获取今天日期
        myDate.setDate(myDate.getDate() - 6)
        // var dateArray = []
        var dateTemp
        var flag = 1
        for (var i = 0; i < 7; i++) {
        dateTemp = (myDate.getMonth() + 1) + '-' + myDate.getDate()
        this.dateArray.push(dateTemp)
        myDate.setDate(myDate.getDate() + flag)
        }
        console.log('123456+', this.dateArray)
  },

  


  initChart(){
  // 初始化echarts
  this.chart = this.$echarts.init(this.$refs.chart)
      // 设置图表option(配置项)绘制图表
      // 绘制图表
      console.log(this.dateArray);
      this.chart.setOption({
        title: {
          text: '一周内搜索热词'
        },
        tooltip: {
          trigger:'axis',
          
        },
        dataset: {
           // 提供一份数据。
          source: [
              ['product', '蛋糕','面包','饼干','月饼点心'],
              [this.dateArray[0],88000,70000,60000,80000],
              [this.dateArray[1],80000,88000,59000,88000],
              [this.dateArray[2],96000,90000,63000,90000],
              [this.dateArray[3],83000,94000,70000,95000],
              [this.dateArray[4],78000,97000,75000,99000],
              [this.dateArray[5],70000,98000,77000,98000],
              [this.dateArray[6],68000,96000,80000,90000],
    ]
        },
        xAxis: {
          type:'category',
          name:'日期',
          boundaryGap:true,
			    nameGap: 10,//坐标轴名称与轴线之间的距离。
          axisTick: {//是否显示坐标轴刻度。
				inside: true//坐标轴刻度是否朝内，默认朝外。
			  }
        },
        yAxis: {
          type: 'value',
          name:'搜索量',
          min:50000,
          max:100000,
        },
        backgroundColor: '#fff',
        color: ['#72ccff', '#d4a4eb','#DD5E89','#1FA2FF'],
        series: [
         { type: 'bar',barWidth: '15%',barCategoryGap: '30%' }, 
         { type: 'bar',barWidth: '15%' ,barCategoryGap: '30%'}, 
         { type: 'bar' ,barWidth: '15%',barCategoryGap: '30%'},
         { type: 'bar',barWidth: '15%' ,barCategoryGap: '30%'}
        ]
 
      })
  }
     },
}
</script>

<style lang="scss" scoped>

</style>